<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>反馈意见</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<style>
			ul,li{
				list-style: none;
				
			}
			#already{
				font-size: 12px!important;
				color: #fff!important;
			}
			#fpwdBtn{
				font-size: 12px!important;
				color: #fff!important;
			}
			.radiohttp{
				margin: 0 auto!important;
				text-align: center;
			}
			.radiohttp .agreebox{
				font-size: 16px;
				float: left;
				color: #fff;
			}
			.radiohttp .agreebox span{
				text-decoration: underline;
			}
			.agree{
				position: fixed;
				bottom: 0;
				width: 100%;
			}
			.check{
				float: left;
				margin-top: 1px!important;
				margin-right: 10px!important;
			}
			#http{
				font-size: 16px;
			}
			#usertype{
				font-size: 16px;
				color: #fff;
				text-align: center;
				margin-bottom: 0.25rem!important;
			}
			 #select{
               
                width:5.1rem;
                height: 0.7rem;
                font-family: "微软雅黑";
                font-size: 16px;
                color: #282828;
                border: 1px #282828 solid;
                margin: 0 auto;
                padding: 0;
               
            }
            .select-head{
                overflow: hidden;
            }
            .select-head .select-head-cont{
                float: left;
            }
            .select-head .select-icon{
                float: right;
                padding-right: 0.3rem!important;
              
            }
            .select-head .select-icon img{
            	width: 0.25rem;
            	
            }
            .option{
                width: 80%;
                border: solid 1px #fff!important;
                color: #666;
                background:#fff;
                display: none;
                position: relative;
                text-align: left;
                z-index: 9;
                line-height: 1rem;
                padding: 0;
                margin: 0 auto;
            }
            .option-item:hover{
                background: rgba(204,106,67,0.3);
            }
            .option-item{
            	 padding-left: 0.2rem!important;
            	border-bottom: solid 1px #f1f1f1;
            }
            .option-item:last-child{
            	border:none
            }
          .mui-dtpicker-header{
          	padding: 6px!important;
          }
          #reg .logreg-input-code{
          	width: 100%!important;
          }
          .logreg-input{
          	width: 100%!important;
          }
          .mui-radio input[type='radio']:before, .mui-checkbox input[type='checkbox']:before{
          	font-size: 20px!important;
          }
          .mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']{
          	top:1px;
          	right: 10px;
          }
          #teachera{
             width: 100%!important;
		    padding: 0 6%!important;
		    height: 0.7rem!important;
		    line-height: 0.7rem!important;
		    border-radius: 0.5rem!important;
		    background: #FFFFFF!important;
		    border: none!important;
		  	display: none;
		    margin-bottom: 0.2rem!important;
		    margin-top: 0.05rem!important;
		    color: #282828!important;
		    font-size: 0.28rem!important;
          }
          input::-webkit-input-placeholder{
          	font-size: 14px;
          	line-height: 0.7rem; 
          }
          #suggest .title{
          	font-size: 12px;
          	text-align: center;
          	padding: 10px 0;
          	width: 85%;
          	margin: 0 auto;
          	text-align: left;
          }
          .suggesttext{
          	font-size: 12px;
          	width: 85%;
          	margin: 0 auto;
          }
          textarea{
          	font-size: 14px;
          	min-height: 200px;
          }
          .submitbtn{
          	width: 30%;
          	margin: 0 auto;
          	height: 40px;
          	line-height: 40px;
          	text-align: center;
          	color:#fff ;
          	background: #ffbc2a;
          	border-radius: 20px;
          }
          .select-head{
          	padding-left: 20px;
          }
          #select{
				display: block;
			    width: 85%;
			    margin-left: auto!important;
			    margin-right: auto!important;
			    height: 50px;
			    border-radius: 100px;
			    background-color: #ffffff;
			    border: none;
			    margin-bottom: 20px!important;
			    box-shadow: 0px 10px 10px 0px rgba(220, 220, 220, 0.5);
			    font-size: 13px;
			    line-height: 50px;
			}
			#suggestcon{
				border-radius: 20px;
				margin-bottom: 0.5rem;
			}
		</style>
	</head>

	<body>
		<div id="suggest">
			<div class="title">请选择你要反馈问题的类别,在输入您要反馈的内容,感谢您的反馈，我们会尽快处理。</div>
			<ul id="select">
            <li>
                <div class="select-head">
                    <span class="select-head-cont" id="usertypes"></span>
                    <span class="select-icon"><img src="../../../images/arrow-down2.png" /></span>
                </div>
                <ul class="option">
                    <li class="option-item">童圈</li>
                    <li class="option-item">小秘书</li>
                    <li class="option-item">课外</li>
                    <li class="option-item">视频</li>
                    <li class="option-item">我的</li>
                    <li class="option-item">支付</li>
                </ul>
                
            </li>
       		</ul>
       		<div class="suggesttext">
       			<textarea id="suggestcon" placeholder="请输入您要反馈的内容"></textarea>
       		</div>
       		<div class="submitbtn" id="submitbtn">提交</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/verification.js"></script> 
		<script src="../../../js/app.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script type="text/javascript">
			
			mui.init()
			var state = app.getState();
			var childid = state.childid
			var selectHead = document.getElementsByClassName('select-head')[0];
            var selectHeadCont = document.getElementsByClassName('select-head-cont');
            var Option = document.getElementsByClassName('option')[0];
            var optionItem = document.getElementsByClassName('option-item');
            var questionType='';
            /*默认是第一个选项*/
            selectHeadCont[0].innerHTML = optionItem[0].innerHTML;
            
            /*点击后出现下拉框*/
            selectHead.addEventListener('click',function(event){
            	event.stopPropagation();
            	if($('.option').is(":hidden")){
            		Option.style.display = 'block';
            	}else{
            		Option.style.display = 'none';
            	}
                
            },false);
            /*点击选项后出现在下拉框*/
            var len = optionItem.length;
            for(var i=0;i<len;i++){
                optionItem[i].index = i;
                optionItem[i].addEventListener('click',function(){
                    selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
                    
                    Option.style.display = 'none';
                },false);
            }
            /*点击其他地方时，select会收起来*/
            document.body.addEventListener('click',function(){
                Option.style.display = 'none';
               
            });
            document.getElementById('submitbtn').addEventListener('tap',function(){
            	if(selectHeadCont[0].innerHTML=='童圈'){
                    	questionType=1;
                    }else if(selectHeadCont[0].innerHTML=='小秘书'){
                    	questionType=2;
                    }else if(selectHeadCont[0].innerHTML=='课外'){
                    	questionType=3;
                    }else if(selectHeadCont[0].innerHTML=='视频'){
                    	questionType=4;
                    }else if(selectHeadCont[0].innerHTML=='我的'){
                    	questionType=5;
                    }else if(selectHeadCont[0].innerHTML=='支付'){
                    	questionType=6;
                    }
                var suggestcon=document.getElementById('suggestcon').value;
				if(suggestcon==''){
					mui.toast('请输入您要反馈的具体内容')
				}else{
					mui.post(Apiurl+'feedback/create',{ 
					uid: state.userid,
            		type: questionType,
            		content: suggestcon,
            		memberToken: state.memberToken,
            		childid:childid
	            	},function(data){
	            		if(data.status==200){
	            			document.getElementById('suggestcon').value=''; 
							var toast="反馈成功"
	            			if(data.point){
	            				toast+='恭喜您获得'+data.point+'积分' 
	            			}                    
	            			mui.toast(toast);
	            			mui.fire(plus.webview.getWebviewById("pcenter"),'refreshpoint')
	            			mui.back(); 
	            		}else{ 
	            			mui.toast('反馈失败')
	            		}
	            	},'json')
				}
            	
            })
		</script>
	</body>

</html>